import React, {useState} from "react";
import {Modal, Row, Col,  Form,  Select,  Checkbox} from "antd";
import AvatarUpload from "./avatar-upload/avatar-upload";
import st from './r-basic-information.module.css'
import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
import {ControlBar} from "../../control-bar";
import {BasicInfoSlice, changeDisplayByInfoKeys, InfoItem, saveBasicInfo} from "../../../redux";
import dayjs from 'dayjs'
import {ClsControl} from "../../block-control";
import { BasicInfoForm } from "./basic-info-form/basic-info-form";

const { Option } = Select;

const dateFmt = 'YYYY 年 MM 月'

export const RBasicInformation: React.FC = () => {
    // redux store
    const basicInfoList = useAppSelector(state => state.basic)
    const dispatch = useAppDispatch()

    // 是否显示头像
    const displayAvatar = basicInfoList.find(d => d.infoKey === 'displayAvatar')?.value
    // 去除 不显示
    const basicInfo = basicInfoList.filter(({display, infoKey}) => display && infoKey !== 'name')
    // not avatar
    const basicInfoNoAvatar = basicInfoList.filter(d => d.infoKey !== 'displayAvatar')

    const displayFormValue = basicInfoNoAvatar.reduce((res, v) => {  res[v.infoKey] = v.display; return res } , {} as any)
    const formValue = basicInfoList.reduce((res ,v) => {
        if (v.infoKey === 'inWorkDate' && v.value) {
            res[v.infoKey] = dayjs(v.value as string, dateFmt)
            return res
        }
        res[v.infoKey] = v.value;
        return res
    }, {} as any)
    // 姓名
    const name = basicInfoList.find(d => d.infoKey === 'name') as InfoItem<BasicInfoSlice, 'name'>
    let nameUi = name.value || name.defaultValue

    // form
    const [form] = Form.useForm()
    const [displayControlForm] = Form.useForm()

    // 状态
    const [isModalOpen, setIsModalOpen] = useState(false)

    function clickEdit() {
        setIsModalOpen(true)
        displayControlForm.setFieldsValue(displayFormValue)
        form.setFieldsValue(formValue)
    }

    return <ClsControl
        controlBar={ <ControlBar style={{top: 0}} onClickEdit={clickEdit} displayConfig={{edit: true}} /> }
    >
        <Modal
            width={900}
            open={isModalOpen}
            centered={true}
            okText={'保存'}
            cancelText={'取消'}
            closable={false}
            onOk={() => {
                const formV = form.getFieldsValue(true)
                const inWorDateNotString = typeof formV.inWorkDate !== 'string';
                if (formV.inWorkDate && inWorDateNotString) {
                    formV.inWorkDate = formV.inWorkDate.format(dateFmt)
                }
                // formV.height = formV.height + 'cm';
                // formV.weight = formV.weight + 'Kg';
                setIsModalOpen(false)
                dispatch(saveBasicInfo(formV))
                dispatch(changeDisplayByInfoKeys(displayControlForm.getFieldsValue(true)))
            }}
            onCancel={() => {
                setIsModalOpen(false)
            }} >
            <Row gutter={16}>
                <Col span={20}>
                    <span style={{height: 50, fontSize: '1.5rem', color: 'burlywood', display: 'block', margin: '16px'}}>编辑基本信息</span>
                    <Form
                        name={'basicInfo'}
                        form={form}
                        initialValues={formValue}
                        // defaultValue={formValue}
                        labelCol={{span: 6}}
                        wrapperCol={{span: 18}}
                    >
                        <BasicInfoForm />
                    </Form>
                </Col>
                <Col span={4}>
                    <div style={{height: 50, margin: 16}}/>
                    <Form
                        // style={{marginTop: 50 + 32}}
                        name={'displayControlForm'}
                        form={displayControlForm}
                    >
                        {
                            basicInfoNoAvatar.map(
                                ({infoKey, display}) =>
                                    <Form.Item key={infoKey} name={infoKey} valuePropName={'checked'}  wrapperCol={{ offset: 8, span: 16 }}>
                                        <Checkbox checked={display}  />
                                    </Form.Item>
                            )
                        }
                    </Form>
                </Col>
            </Row>
        </Modal>
       <Row gutter={16} style={{minHeight: 250}}>
           {/* 头像 */}
           {
               displayAvatar ? <Col span={8} style={{padding: 20}} >
                       <AvatarUpload/>
                   </Col>
                   : null
           }
           {/* 基本信息 */}
           <Col span={16} style={{padding: 20}}>
               <div>
                   <h1 className={st['rb-name']}>{nameUi}</h1>
               </div>
               <Row  gutter={16}>
                   {
                       basicInfo.filter(d => d.infoKey !== 'displayAvatar').map(
                           ({value, defaultValue, infoKey}) => (
                               <Col key={infoKey} style={{height: 32}} span={12}>
                                   <span className={st['rb-info-label']}>{defaultValue}：</span>
                                   <span>{value || defaultValue}</span>
                                   {infoKey === 'height' ? <span>cm</span> : null}
                                   {infoKey === 'weight' ? <span>Kg</span> : null}
                               </Col> )
                       )
                   }
               </Row>
           </Col>
       </Row>
    </ClsControl>
}
